<!--
 * @Author: your name
 * @Date: 2021-02-15 20:59:04
 * @LastEditTime: 2021-05-18 23:24:18
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \jianfa-admin\src\page\project-code\code-list\index.vue
-->
<template>
  <Container class="code-list">
    <!-- <div id="qrcode"></div>  -->
    <Breadcrumb :navList="['项目二维码管理', '二维码列表']"></Breadcrumb>
    <avue-crud
      :search.sync="searchForm"
      :data="data"
      :option="option"
      :page.sync="page_config"
      @size-change="sizeChange"
      @current-change="currentChange"
      @search-change="search"
      :table-loading="loading"
    >
      <template slot="code_img" slot-scope="scope">
        <div
          :id="'qrcode' + scope.row.id"
          style="width: 100px; height: 100px"
        ></div>
      </template>
      <template slot-scope="{ type, size, row }" slot="menu">
        <el-button
          icon="el-icon-edit"
          :size="size"
          :type="type"
          @click="toEdit(row.id)"
          >编辑</el-button
        >
        <del-button :size="size" :type="type" @click="delPro(row.id)">
          删除</del-button
        >
      </template>
    </avue-crud>
  </Container>
</template>
<script>
import QRCode from "qrcodejs2"; //生成二维码
// import mixins_page from "@/assets/mixins/paging";
export default {
  // mixins: [mixins_page],
  data() {
    return {
      searchForm: {
        code_name: ""
      },
      loading: true,
      data: [],
      option: {
        searchShow: false,
        searchSize: "mini",
        // page: true,
        index: true,
        indexLabel: "序号",
        editBtn: false,
        delBtn: false,
        refreshBtn: false,
        addBtn: false,
        cancelBtn: false,
        align: "center",
        menuAlign: "center",
        column: [
          {
            label: "项目名称",
            prop: "code_name",
            search: true,
            rules: [
              {
                required: true,
                message: "请输入姓名",
                trigger: "blur"
              }
            ]
          },
          {
            label: "二维码",
            prop: "code_img",
            slot: true,
            width: "200px"
          },
          {
            label: "创建日期",
            prop: "create_time",
            width: "200px"
          }
        ]
      }
    };
  },
  created() {
    this.getData();
  },
  methods: {
    async delPro(id) {
      const { code, msg } = await this.$api.code.delPro({ id });
      if (!code) {
        this.$message.success(msg);
        this.getData(this.api_params);
      }
    },
    //搜索
    async search(params, done) {
      await this.getData(this.api_params);
      done();
    },
    // 去编辑
    toEdit(id) {
      this.$router.push({ path: "/qr-code-edit", query: { code_id: id } });
    },
    /* rowStyle({ row, column, rowIndex }) {
      return {
        height: "120px",
      };
    }, */
    //获取工程项目列表
    async getData(params) {
      this.loading = true;
      const {
        code,
        data: { results, total }
      } = await this.$api.code.getCodeList(params);
      if (!code) {
        this.data = results;
        this.page_config.total = total;
        this.data.forEach(item => {
          const url = "http://dqqljf.cn/#/project_code?id=" + item.id;
          const codeName = "qrcode" + item.id;
          this.$nextTick(() => {
            this.qrCode(url, codeName);
          });
        });
        this.loading = false;
        //
      }
    },
    // 生成二维码
    qrCode(url, codeName) {
      /*       console.log(" :>> ", document.querySelector("#qrcode8"));
      console.log("codeName :>> ", codeName); */
      let qrcode = new QRCode(codeName, {
        width: 600, //图像宽度
        height: 600, //图像高度
        colorDark: "#000000", //前景色
        colorLight: "#ffffff", //背景色
        typeNumber: 4,
        correctLevel: QRCode.CorrectLevel.H //容错级别 容错级别有：（1）QRCode.CorrectLevel.L （2）QRCode.CorrectLevel.M （3）QRCode.CorrectLevel.Q （4）QRCode.CorrectLevel.H
      });
      qrcode.clear(); //清除二维码
      qrcode.makeCode(url); //生成另一个新的二维码
    }
  }
};
</script>
<style lang="scss" scoped>
/deep/.code-list {
  .cell {
    display: flex;
    justify-content: center;
    align-items: center;
    img {
      height: 100px;
    }
  }
}
</style>
